<template>
  <div ref="dashboard" class="dashboard">
    <div class="top">
      <div class="fullpage-icon-holder">
        <svg-icon
          icon-class="full_page_view"
          class-name="fullpage-icon"
          @click="toggleFullScreen"
        />
      </div>
      <div class="main-title">后台管理系统</div>
      <div class="time-holder">
        <time-show />
      </div>
    </div>
    <div class="left">
      <div class="item">
        <div class="title-holder">
          <span class="title-cn"> 电商数据 </span>
          <span class="title-en"> Shell Data </span>
        </div>
        <shell-data />
      </div>
      <div class="item">
        <div class="title-holder">
          <span class="title-cn"> 热门搜索词 </span>
          <span class="title-en"> Top Search </span>
        </div>
        <top-search />
      </div>
    </div>
    <div class="middle">
      <div class="item">
        <bar-chart />
      </div>
      <div class="item flex">
        <chinese-map />
        <pie-chart />
      </div>
    </div>
    <div class="right">
      <div class="item">
        <div class="title-holder">
          <span class="title-cn"> 统计数据 </span>
          <span class="title-en"> Statistics Data </span>
        </div>
        <statistics-data />
      </div>
      <div class="item">
        <div class="title-holder">
          <span class="title-cn"> 大额订单Top </span>
          <span class="title-en"> Supper Order </span>
        </div>
        <supper-order />
      </div>
    </div>
    <div class="bottom">
      <bg-animate />
    </div>
  </div>
</template>

<script>
import TimeShow from './components/time-show'
import ShellData from './components/shell-data'
import TopSearch from './components/top-search'
import BarChart from './components/bar-chart'
import ChineseMap from './components/chinese-map'
import PieChart from './components/pie-chart'
import screenfull from 'screenfull'
import BgAnimate from './components/bg-animate.vue'
import StatisticsData from './components/statistics-data.vue'
import SupperOrder from './components/supper-order.vue'
export default {
  name: 'Dashboard',
  components: {
    TimeShow,
    ShellData,
    TopSearch,
    BarChart,
    ChineseMap,
    PieChart,
    BgAnimate,
    StatisticsData,
    SupperOrder
  },
  methods: {
    // 切换全屏
    toggleFullScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.dashboard)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  width: 100%;
  min-height: 120vh;
  position: relative;
  background-color: #0a1631;
  color: #9aa8d4;

  .item:nth-child(2) {
    margin-top: 20px;
  }

  .item.flex {
    display: flex;
  }

  .title-holder {
    margin-bottom: 20px;
    font-family: Microsoft Yahei, Arial, sans-serif;
    font-size: 22px;
    color: #9aa8d4;
    font-weight: 400;
    .title-en {
      font-size: 20px;
      color: #404d69;
    }
  }

  .top {
    height: 122px;
    width: 100%;
    .fullpage-icon {
      position: absolute;
      left: 10px;
      top: 10px;
      width: 50px;
      height: 50px;
    }

    .main-title {
      width: 70%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
      font-family: Microsoft Yahei, Arial, sans-serif;
      font-size: 36px;
      line-height: 100px;
      color: #fff;
      text-shadow: #fff 0 0 15px;
      font-weight: 700;
      background: url('http://shen_hao222.gitee.io/test_page/static/img/titleBG.a4cdf1b6.png')
        no-repeat center;
      background-size: 100% 100%;
      background-position: 50%;
    }

    .time-holder {
      position: absolute;
      right: 30px;
      top: 20px;
      margin-right: 20px;
      font-family: Microsoft Yahei, Arial, sans-serif;
      font-size: 20px;
      color: #fff;
      font-weight: 400;
    }
  }

  .left {
    float: left;
    box-sizing: border-box;
    padding: 10px 0 0 10px;
    width: 25%;
  }

  .middle {
    float: left;
    box-sizing: border-box;
    padding: 10px 0 0 10px;
    width: 50%;
  }

  .right {
    float: left;
    box-sizing: border-box;
    padding: 10px 0 0 10px;
    width: 25%;
  }

  .bottom {
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0px;
    height: 130px;
  }
}
</style>
